<script setup>

const bg1Url = new URL('@/assets/images/background/home_bg1.png', import.meta.url).href
const bg5Url = new URL('@/assets/images/background/manage_bg2.png', import.meta.url).href

</script>

<template>

    <div class="background" :style="{ backgroundImage: `url(${bg5Url})`, minHeight: '200vh' }">
        <div class="title-flex">
            <h1 style="color: cadetblue;">资源管理</h1>
        </div>

        <div class="search-wrapper">

            <input v-model="query" type="text" placeholder="请输入关键词" class="search-input" />
            <button @click="handleSearch" class="search-button">
                搜索
            </button>
        </div>
    </div>

</template>

<style scoped>
.search-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto 0;
    background: #ffffffcc;
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 620px;
}

.search-input {
    flex: 1;
    padding: 12px 20px;
    border: none;
    outline: none;
    font-size: 16px;
    border-radius: 32px 0 0 32px;
    background: transparent;
}

.search-button {
    padding: 12px 20px;
    background-color: #409eff;
    color: #fff;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 0 32px 32px 0;
    transition: background-color 0.3s;
}

.search-button:hover {
    background-color: #66b1ff;
}
</style>